<!DOCTYPE html>
<html>

<head>
    <title>车辆监控·车队管理系统</title>

    {include file="common/header"/}
    <el-main>
        <!--                <el-table >-->
        <!--                    <el-table-column label="日期" width="140">-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column label="姓名" width="120">-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column label="地址">-->
        <!--                    </el-table-column>-->
        <!--                </el-table>-->
        <div id="container"></div>
    </el-main>
    {include file="common/footer"/}
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=p8FRTGZ4V26VzvT6Kot8fM8DFxG8UGVv"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                len : 106.4737810,
                lat : 29.5675670,
                username : "",
                loc:[

                ],
            },
            mounted () {

                this.abcd();
                this.abc();
                // setTimeout(()=>{   //设置延迟执行
                    this.baiduMap();
                // },1000);

                // this.username = getCookie('username');

            },

            methods: {
                logOut() {
                    var that = this;
                    axios.post('user/logout')
                        .then(function (response)
                        {
                            if (response.data.code == 200) {
                                that.$message({
                                    message: '退出成功,正在跳转中',
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    location.replace('');
                                }, 1000)
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error)
                        {
                            that.$message.error('tuichu失败，服务器内部错误');
                        })
                    ;

                },
                abcd(){
                    var that = this;
                    axios.post('user/getmyvalue')
                        .then(function (response)
                        {
                            if(response.data.code==200){
                                that.username = response.data.data.name;
                            }
                        })

                },
                abc(){
                    var that = this;
                    axios.post('car/getlocation')
                        .then(function (response)
                        {
                            that.loc= response.data.data;
                        })

                },
                baiduMap(){

                    var that = this;
                    var marker = [];
                    //num计数器，用于计数上次有多少辆车，点击更新时便于删除
                    var num = 0;
                    var map = new BMapGL.Map('container');
                    var point = new BMapGL.Point(this.len, this.lat);
                    map.centerAndZoom(point, 15);
                    // 创建小车图标(目前本地还没有图标，地图上看不到，可以删掉下面一行，marker去掉pt后面的参数，让其变成默认红点)
                    var myIcon = new BMapGL.Icon('http://i2.tiimg.com/736160/ea1770cd411d5d38.png', new BMapGL.Size(52, 26));
                    // 创建Marker标注，使用小车图标
                    // for (var i in that.loc) {
                    //     // (function (x) {
                    //     console.log('name ')
                    //     console.log(that.loc[i].name)
                    //     console.log('i')
                    //     console.log(that.loc[i])
                    //     console.log('对象数组中地址')
                    //     console.log(i)
                    //     var pt = new BMapGL.Point(parseFloat(this.loc[i].lng), parseFloat(this.loc[i].lat));
                    //     marker[i] = new BMapGL.Marker(pt, {
                    //         icon: myIcon
                    //     });
                    //     map.addOverlay(marker[i]);
                    //     num++;
                    //     var opts = {
                    //         width: 200,
                    //         height: 100,
                    //         title: '车辆信息'
                    //     };
                    //     var tmp;
                    //     switch(that.loc[i].type) {
                    //         case 'small_passenger': tmp = "小型客车";break;
                    //         case 'mid_passenger':   tmp = "中型客车";break;
                    //         case 'large_passenger': tmp = "大型客车";break;
                    //         case 'small_cargo':     tmp = "小型货车";break;
                    //         case 'mid_cargo':       tmp = "中型货车";break;
                    //         case 'large_cargo':     tmp = "大型货车";break;
                    //     }
                    //
                    //     //闭包完成点击事件的参数传递
                    //     (function (x) {
                    //         var infoWindow = new BMapGL.InfoWindow('牌照：'+that.loc[i].license+'</br>驾驶员：'+that.loc[i].name+'</br>车辆类型：'+tmp, opts);
                    //         marker[x].addEventListener("click", function () {
                    //             this.openInfoWindow(infoWindow,pt);
                    //         });
                    //     })(i);
                    // }


                    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
                    //定义一个控件类
                    function ZoomControl() {
                        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
                        this.defaultOffset = new BMapGL.Size(20, 20)
                    }
                    //通过JavaScript的prototype属性继承于BMap.Control
                    ZoomControl.prototype = new BMapGL.Control();

                    //自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回
                    //在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
                    ZoomControl.prototype.initialize = function(map) {
                        //创建一个dom元素
                        var div = document.createElement('div');
                        //添加文字说明
                        div.appendChild(document.createTextNode('更新位置'));
                        // 设置样式
                        div.style.cursor = "pointer";
                        div.style.padding = "7px 10px";
                        div.style.boxShadow = "0 2px 6px 0 rgba(27, 142, 236, 0.5)";
                        div.style.borderRadius = "5px";
                        div.style.backgroundColor = "white";
                        // 绑定事件,点击一次更新位置
                        div.onclick = function(e){
                            //更新位置相关post代码
                            //先写更新marker1占位

                            //删除原有的marker
                            // for(var j=0;j<num;j++){
                            //     console.log('删除marker：'+j);
                            //     map.removeOverlay(marker[j]);
                            // }
                            map.clearOverlays();
                            //初始化loc数组
                            that.loc = [];
                            //post请求更新数组
                            that.abc();
                            //清空marker
                            marker = [];
                            num = 0;
                            setTimeout(function(){
                                console.log(that.loc);
                                for (var k in that.loc) {
                                    console.log('name ')
                                    console.log(that.loc[k].name)
                                    console.log('k')
                                    console.log(that.loc[k])
                                    console.log('对象数组中地址')
                                    console.log(k)
                                    var pt = new BMapGL.Point(parseFloat(that.loc[k].lng), parseFloat(that.loc[k].lat));
                                    marker[k] = new BMapGL.Marker(pt, {
                                        icon: myIcon
                                    });

                                    map.addOverlay(marker[k]);
                                    num++;
                                    var opts = {
                                        width: 200,
                                        height: 110,
                                        title: '车辆信息'
                                    };
                                    var tmp;
                                    switch(that.loc[k].type) {
                                        case 'small_passenger': tmp = "小型客车";break;
                                        case 'mid_passenger':   tmp = "中型客车";break;
                                        case 'large_passenger': tmp = "大型客车";break;
                                        case 'small_cargo':     tmp = "小型货车";break;
                                        case 'mid_cargo':       tmp = "中型货车";break;
                                        case 'large_cargo':     tmp = "大型货车";break;
                                    }

                                    //闭包完成点击事件的参数传递
                                    (function (x) {
                                        var infoWindow = new BMapGL.InfoWindow('牌照：'+that.loc[k].license+'</br>驾驶员：'+that.loc[k].name+'</br>车辆类型：'+tmp+'</br>定位时间：'+that.loc[k].time, opts);
                                        marker[x].addEventListener("click", function () {
                                            this.openInfoWindow(infoWindow,pt);
                                        });
                                    })(k);
                                }
                            }, 500);






                        }
                        // 添加DOM元素到地图中
                        map.getContainer().appendChild(div);
                        // 将DOM元素返回
                        return div;
                    }
                    //创建控件元素
                    var myZoomCtrl = new ZoomControl();
                    //添加到地图中
                    map.addControl(myZoomCtrl);
                }
            }
        })
    </script>

</html>